<template>
	<div class="commodityDetail">
		<header class="clear">
			<!--<img src="../assets/image/back_arrow@2x.png" class="back-icon fl"/>-->
			<nav class="navbar clear">
				<a @click="scrollA" :class="{'active1': isA, 'active2': isB}" class="fl"><div class="nav-item">商品</div></a>
				<a @click="scrollB" :class="{'active1': isB, 'active2': isA}" class="fr"><div class="nav-item">详情</div></a>
			</nav>
			<router-link to="personalCenter" class="share-icon"><img src="../assets/image/ico_personal@2x@2x.png"/></router-link>
			<router-link to="index" class="shoppingcart-icon"><img src="../assets/image/ico_home@2x@2x.png"/></router-link>
		</header>
		<div class="commoditybar">
			<div class="swipebar">
				<mt-swipe :auto="0">
					<mt-swipe-item v-for="item in productContent.banner" :key="item.img"><img :src="item" class="swipe-img"/></mt-swipe-item>
				</mt-swipe>
				<!--<div class="sales-activity hidden">-->
					<!--<span class="fl">抢购中</span>-->
					<!--<span class="fr">距结束仅剩 11天12小时12分钟</span>-->
				<!--</div>-->
			</div>
			<p class="product-name">{{productContent.goodsName}}</p>
			<p class="product-tips">{{productContent.subName}}</p>
			<div class="product-price clear"><span class="shop-price fl"><i>¥</i>{{productContent.shopPrice}}+</span>
			  <span class="sales fl">{{productContent.point}}积分</span><span class="market-price fl">¥{{productContent.marketPrice}}</span>
			</div>
			<div class="service clear">
				<span class="fl clear" v-if="productContent.isOnline == 0"><img src="../assets/image/tick@2x.png" class="fl"/><p class="fl">门店自提</p></span>
				<span class="fl clear"><img src="../assets/image/tick@2x.png" class="fl"/><p class="fl">正品保障</p></span>
				<span class="fl clear"><img src="../assets/image/tick@2x.png" class="fl"/><p class="fl">全场包邮</p></span>
			</div>
			<div class="activity clear" v-if="productContent.subjectID != null || undefined || ''">
				<p class="item-text fl"><i class="item-title">活动：&nbsp;</i>{{productContent.subjectName}}</p>
				<router-link to="" class="fr"><img src="../assets/image/ico_leave-for@2x.png" class="item-icon"/></router-link>
			</div>
			<div class="evaluate">
				<div class="evaluate-title clear">
					<p class="evaluate-num fl">买家评价( {{commentCon.count}} )</p>
					<router-link :to="{path:'commentList', query:{sku: productContent.sku}}" class="fr"><img src="../assets/image/ico_leave-for@2x.png" class="evaluate-icon"/></router-link>
					<p class="noComment fr" v-if="commentCon.count == '0'">暂时还没有评价哦！</p>
				</div>
				<div class="evaluate-content clear" v-if="commentCon.count != 0">
					<img :src="commentCon.headerUrl" class="head-img fl"/>
					<div class="evaluate-msg fl">
						<p class="evaluate-name">{{commentCon.nickname}}</p>
						<p class="evaluate-container">{{commentCon.comment}}</p>
						<p class="evaluate-size">颜色:&nbsp; 尺码：</p>
					</div>
				</div>
			</div>
			<div class="details-header clear"><span class="fl"></span><p class="fl">商品详情</p><span class="fl"></span></div>
			<table class="parameter">
				<tr v-for="item in productContent.attrs">
					<td>{{item.attributeKey}}</td>
					<td>{{item.attributeValue}}</td>
				</tr>
			</table>
			<div class="details-content" v-html="productContent.desc"></div>
		</div>
		<div class="guidance fix" :class="guidance">
			<img class="guidanceclose fl" src="../assets/image/×@2x.png" @click="guidanceclose">
			<img class="guidancelogo fl" src="../assets/image/logo@2x.png">
			<div class="guidancewords fl"><p>搭搭秀</p><span>积分商品仅限APP用户购买</span></div>
			<router-link to="/download" class="guidancedownload fr">立即下载</router-link>
		</div>
	</div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

export default {
	data () {
		return {
			spu: '',
			lng: lng,
			lat: lat,
			token: '',
			productContent:{},
			stock: 0,
			commentCon: [],
			storeInfo: [],
			colorType: null,
			sizeType: null,
			popupFlag: false,
			selectFlag: false,
			wayFrom: '',
			proNum: 1,
			selectedNum: 1,
			color: '',
			size: '',
			colorList: [],
			sizeList: [],
			stockListColor: [],
			stockListSize: [],
			skuListColor: [],
			skuListSize: [],
			nowStock: 0,
			nowSku: '',
			goodsMsg: null,
			followFlag: null,
			comfirmOrderMsg: [],
			guidance: '',
			isA: true,
			isB: false
	}},
	created(){
		this.spu=this.$route.query.spu;
	},
	name: 'app',
	mounted:function () {
		this.$nextTick(function () {
			this.cartView();
			this.fetch();
		});
	},
	methods:{
		cartView:function () {
			var _this = this;
			this.$http.post(Util.ajaxPath.devProductUrl+'shop-mms/mms/point/detail',{longitude:this.lng,latitude:this.lat,spu:_this.spu},{emulateJSON : true}).then(function (res) {
				_this.productContent = res.body.content;
				_this.stock = _this.productContent.stock;
				_this.colorList = _this.productContent.colors;
				_this.sizeList = _this.productContent.sizes;
				_this.commentCon = _this.productContent.comment;
				_this.storeInfo =  _this.productContent.storeInfo;
				_this.followFlag = _this.productContent.isfollow;
				res.body.content.desc = res.body.content.desc.replace(/\<br\>/g,'');
			});
		},
		fetch:function () {
			this.token = (window.localStorage.getItem("token") || '[]');
		},
		guidanceclose:function () {
			this.guidance = 'hidden';
		},
		scrollA () {
			document.body.scrollTop = document.querySelector(".swipebar").offsetTop;
			this.isA = true;
			this.isB = false;
		},
		scrollB () {
			document.body.scrollTop = document.querySelector(".details-header").offsetTop;
			this.isA = false;
			this.isB = true;
		}
	}
}
</script>
<style lang="scss">
.commodityDetail{
	background: #fff;
	header{
		width: 100%; height: 0.86rem; position:fixed; top:0; left: 0; z-index: 1000; background:#fff; border-bottom:0.02rem solid #ddd;
		.back-icon{ width: 0.44rem; height: 0.44rem; margin: 0.22rem 0 0.22rem 0.34rem;}
		.navbar{
			width:2.02rem; height:0.86rem; margin:0 auto; background:#fff;
			a{ display: block; height: 0.84rem;}
			.nav-item{
				width: 0.68rem; height: 0.84rem; font-size: 0.3rem; line-height:0.84rem; text-align: center; color: #999;
			}
			.active1{
				border-bottom: 0.04rem solid #151517;
				.nav-item{ color:#151517;}
			}
			.active2{
				border-bottom: 0;
				.nav-item{ color:#999;}
			}
		}
		.share-icon{
			display: block; width: 0.44rem; height: 0.44rem; position:absolute; right:0.34rem; top:0.22rem;
			img{ display: block; width: 0.44rem; height: 0.44rem;}
		}
		.shoppingcart-icon{
			display: block; width: 0.44rem; height: 0.44rem; position:absolute; right:1.14rem; top:0.22rem;
			img{display: block; width: 0.44rem; height: 0.44rem;}
		}
	}
	.commoditybar{
		background: #fff; position: absolute; left: 0; top: 0.88rem;
	}
	.mint-swipe .mint-swipe-items-wrap{height: 7.5rem;}
	.swipe-img{display: block; width: 7.5rem; height: 7.5rem;}
	.mint-swipe-indicator{width: 0.1rem; height: 0.1rem; background: #999;}
	.mint-swipe-indicators .is-active{width:0.16rem; height:0.1rem; background: #333; }
	.sales-activity{
		width: calc(100%-0.6rem); height: 0.6rem; padding: 0 0.3rem; background: #fe4a6b;
		span{font-size: 0.28rem; line-height:0.6rem; color: #fff;}
	}
	.product-name{margin: 0.44rem 0.3rem 0.19rem 0.3rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; font-size: 0.3rem; text-align: left; line-height:0.37rem; color: #151517;}
	.product-tips{margin-left: 0.3rem; height:0.2rem; font-size: 0.2rem; line-height: 0.2rem; text-align: left; color: #666;}
	.product-price{
		height:0.4rem; margin:0.3rem 0 0.3rem 0.3rem;
		.shop-price{
			height: 0.4rem; font-size: 0.4rem; line-height: 0.4rem; color: #ff365d;
			i{ padding-top:0.16rem; height:0.24rem; font-size: 0.24rem; line-height: 0.24rem; color: #ff365d;}
		}
		.sales{ margin: 0.06rem 0; padding: 0.02rem 0.1rem; height: 0.28rem; font-size: 0.2rem; line-height: 0.28rem; text-align: center; background: #fe4a6b; color: #fff;}
		.market-price{ padding: 0.08rem 0.14rem 0.08rem 0.3rem; height:0.24rem; font-size: 0.32rem; text-decoration: line-through; line-height: 0.24rem; color: #a8a8a8; }
	}
	.service{
		width:calc(100%-0.58rem); height: 0.6rem; padding: 0 0.29rem; background:#f4f5f5;
		span{
			display: block;
			img{ display: block; width: 0.2rem; height: 0.2rem; padding: 0.2rem 0.1rem 0.2rem 0;}
			p{ font-size: 0.2rem; line-height: 0.6rem; color: #999;}
			+span{ margin-left: 0.68rem;}
		}
	}
	.activity{ border-bottom: 1px solid #f1f1f1;}
	.activity{
		width: calc(100%-0.6rem); height: 0.8rem; padding: 0 0.3rem;
		a{ display: block; height:0.3rem; margin: 0.25rem 0;}
		.item-text{
			font-size: 0.24rem; line-height: 0.8rem; color: #333;
			.item-title{font-size: 0.24rem; line-height: 0.8rem; color: #333;}
		}
		.item-icon{ display: block; width:0.3rem; height: 0.3rem;}
	}
	.evaluate{
		background: #fff; padding: 0 0.3rem;
		.evaluate-title{
			height:0.88rem; width: 100%; border-bottom:1px solid #f1f1f1;
			a{ display: block; height:0.3rem; margin: 0.29rem 0;}
			.evaluate-num{ font-size: 0.28rem; text-align: left; line-height: 0.88rem; color: #151517;}
			.evaluate-icon{ display: block; width:0.3rem; height: 0.3rem;}
			.noComment{font-size: 0.28rem; color: #999; line-height: 0.88rem; padding-right: 0.29rem;}
		}
		.evaluate-content{
			width: 100%; height: 1.62rem; border-bottom: 1px solid #f1f1f1; background: #fff;
			.head-img{ width: 0.82rem; height: 0.82rem; padding: 0.4rem 0.2rem 0.4rem 0; border-radius: 50%;}
			.evaluate-msg{
				width: 5.88rem;
				.evaluate-name{width: 5.88rem; padding: 0.27rem 0 0.2rem 0; height: 0.26rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 0.26rem; line-height: 0.26rem; color: #2e2e2e;}
				.evaluate-container{width: 5.88rem; padding-bottom: 0.14rem; height: 0.24rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 0.24rem; line-height: 0.24rem; color: #2e2e2e;}
				.evaluate-size{width: 5.88rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 0.2rem; line-height: 0.22rem; color: #a8a8a8;}
			}
		}
	}
	.store-bar{ width: calc(100% - 0.6rem); height: 1.3rem; padding: 0 0.3rem 0.88rem; background: #fff;}
	.store-msg{
		width: 6.6rem;
	.store-name{
		width: 100%; height: 0.28rem; padding: 0.3rem 0 0.22rem 0;
		img{display: block; width: 0.28rem; height: 0.28rem;}
		span{display:block; height: 0.28rem; font-size: 0.28rem; line-height: 0.28rem; text-indent:0.22rem; color: #151517; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
	}
	.store-add{
		width: 100%; height: 0.22rem;
		img{display: block; width: auto; height: 0.22rem;}
		span{display:block; height: 0.22rem; font-size: 0.22rem; line-height: 0.22rem; text-indent:0.14rem; color: #999; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
	}
	}
	.to-store-a{ display: block; height: 0.3rem; margin:0.5rem 0;}
	.to-store{ display: block; width: 0.3rem; height: 0.3rem;}

	.details-header{
		width:5.84rem; height: 0.26rem; margin: 0 auto; padding: 0.6rem 0 0.4rem;
		p{ padding: 0 0.2rem; font-size: 0.26rem; line-height: 0.26rem; color: #333;}
		span{display: block; width: 2.2rem; height: 0.02rem; margin:0.12rem 0;  background: #f1f1f1; }
	}
	.parameter{
		width:calc(100%-0.6rem); margin:0 auto;
		td{width: 3.44rem; height: 0.58rem; border: 1px solid #ddd; font-size: 0.24rem; line-height: 0.58rem; text-align: center; color: #333;}
	}
	.details-content{
    padding-top: 0.5rem; width: 100%;
    img{width: 100%;}
	}
	.sumit-btn{display:block; width: 100%; height: 0.88rem; border: 0; font-size: 0.3rem; text-align: center; line-height: 0.88rem; color: #fff;}
	.gradient{width:100%; height:0.88rem; background: linear-gradient(to right,#fe4a6b,#e8163f);
	}
	.guidance{
		width: 100%; height: 0.88rem; background: rgba(51,51,51,.9); position: fixed; bottom: 0; left: 0; z-index: 19;
		.guidanceclose{ display: block; padding: 0.34rem 0.24rem 0; width: 0.21rem; height: 0.21rem; }
		.guidancelogo{ display: block; padding-top: 0.11rem; width: 0.66rem; height: 0.66rem; }
		.guidancewords{
			padding-left: 0.2rem;
			p{ padding-top: 0.18rem; line-height: 0.24rem; font-size: 0.24rem; color: #fff; }
			span{ display: block; padding-top: 0.11rem; line-height: 0.2rem; font-size: 0.2rem; color: #fff; }
		}
		.guidancedownload{ display: block; margin: 0.21rem 0.38rem 0 0; width: 1.2rem; height: 0.46rem; line-height: 0.46rem; text-align: center; font-size: 0.22rem; color: #fff; background: #ff365d; border-radius: 0.23rem; }
	}
}
</style>